<template>
  <el-card class="reminder-card">
    <div class="header-with-more">
      <div class="custom-tabs-label">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="25"
          viewBox="0 0 24 25"
          fill="none"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M11.9655 19.7353C11.8755 19.9753 11.6955 20.1653 11.4655 20.2753C11.2355 20.3753 10.9755 20.3853 10.7355 20.2953C10.4955 20.2053 10.3055 20.0353 10.1955 19.8053L8.87551 16.8953C9.47551 16.7753 10.1355 16.6653 10.8355 16.5753L11.9455 19.0053C12.0455 19.2353 12.0555 19.4953 11.9655 19.7353ZM14.8855 6.38525C14.2955 5.09525 13.3255 4.25525 12.2355 4.07525C11.3455 3.93525 10.4755 4.25525 9.84551 4.94525C8.41551 6.51525 6.98551 7.80525 5.73551 8.81525L7.52551 12.5953C7.69551 12.9753 7.52551 13.4153 7.14551 13.5853C7.04551 13.6353 6.94551 13.6553 6.83551 13.6553C6.55551 13.6553 6.28551 13.4953 6.15551 13.2153L4.52551 9.76525C4.16551 10.0352 3.82551 10.2752 3.51551 10.4852C2.24551 11.3553 1.89551 12.9453 2.62551 14.5353L3.01551 15.3953C3.61551 16.7153 4.70551 17.4753 5.90551 17.4753C6.15551 17.4753 6.40551 17.4453 6.65551 17.3853C6.87551 17.3253 7.11551 17.2653 7.36551 17.2153L8.83551 20.4253C9.10551 21.0153 9.58551 21.4753 10.2055 21.7053C10.4855 21.8053 10.7755 21.8653 11.0755 21.8653C11.4155 21.8653 11.7655 21.7853 12.0855 21.6453C12.6855 21.3653 13.1455 20.8753 13.3755 20.2653C13.6055 19.6453 13.5755 18.9853 13.3055 18.3853L12.3955 16.3953C13.2155 16.3153 14.0855 16.2653 14.9955 16.2453C15.9655 16.2253 16.8555 15.7253 17.3655 14.9053C17.8755 14.1053 17.9355 13.1053 17.5455 12.2353L14.8855 6.38525Z"
            fill="#007BFF"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M21.2169 6.48104C20.4459 4.78604 18.8969 3.54304 17.0719 3.15504C16.6699 3.06304 16.2689 3.32704 16.1829 3.73204C16.0959 4.13704 16.3549 4.53604 16.7599 4.62204C18.1409 4.91604 19.2679 5.82004 19.8519 7.10204C20.4199 8.35104 20.3779 9.76204 19.7379 10.975C19.5439 11.341 19.6839 11.795 20.0499 11.989C20.1619 12.048 20.2819 12.076 20.3999 12.076C20.6689 12.076 20.9289 11.93 21.0639 11.676C21.9229 10.049 21.9789 8.15604 21.2169 6.48104Z"
            fill="#007BFF"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M16.7594 5.7303C16.3714 5.5843 15.9394 5.7853 15.7954 6.1733C15.6524 6.5613 15.8504 6.99329 16.2384 7.13629C16.7764 7.33529 17.2044 7.7343 17.4434 8.2563C17.6884 8.7983 17.7014 9.40029 17.4794 9.9513C17.3244 10.3343 17.5104 10.7723 17.8954 10.9263C17.9874 10.9633 18.0814 10.9813 18.1754 10.9813C18.4724 10.9813 18.7534 10.8033 18.8714 10.5113C19.2474 9.57729 19.2254 8.5563 18.8084 7.6353C18.4014 6.7453 17.6744 6.0683 16.7594 5.7303Z"
            fill="#007BFF"
          />
        </svg>
        <span
          style="
            color: var(--Primary4-950, #16191d);
            font-family: 'Source Han Sans CN';
            font-size: 18px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
          "
          >我的提醒</span
        >
      </div>
      <!-- <el-link type="primary">更多>></el-link> -->
      <span
        style="
          color: var(--Primary2-500, #007bff);
          font-family: 'Source Han Sans CN';
          font-size: 16px;
          font-style: normal;
          font-weight: 400;
          line-height: normal;
        "
        >更多>></span
      >
    </div>
    <div class="reminder-wrapper">
      <ul class="reminder-list">
        <li
          v-for="(item, index) in remindList"
          :key="index"
          class="reminder-item"
        >
          <!-- 红色小圆点 -->
          <span ><svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
  <circle cx="4" cy="4" r="4" fill="#E81212"/>
</svg></span>

          <div class="container">
            <span class="text">{{ item.remindTitle }}</span>
            <p class="date">{{ item.createTime }}</p>
          </div>
        </li>
      </ul>
    </div>
  </el-card>
</template>

<script setup>
defineProps({
  remindList: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped>
@import "../../style/HR.scss";

.reminder-card {
  border-radius: 8px !important;
  border: 1px solid #fff !important;
  background: #fcfcfd !important;

  /* 阴影1 */
  box-shadow: -38px 83px 25px 0px rgba(168, 168, 189, 0),
    -24px 53px 23px 0px rgba(168, 168, 189, 0.01),
    -14px 30px 20px 0px rgba(168, 168, 189, 0.02),
    -6px 13px 15px 0px rgba(168, 168, 189, 0.03),
    -2px 3px 8px 0px rgba(168, 168, 189, 0.04) !important;
}

/* 外层容器设置弹性滚动 */
.reminder-wrapper {
  max-height: 55vh; /* 可视区域最大高度 */
  min-height: 100px; /* 最小高度保证可见 */
  overflow-y: auto; /* 垂直滚动 */
  scrollbar-width: thin; /* Firefox滚动条细样式 */
}

/* 自定义滚动条样式（Webkit内核） */
.reminder-wrapper::-webkit-scrollbar {
  width: 6px;
}

.reminder-wrapper::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 3px;
}

.reminder-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.reminder-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px dashed #f0f0f0;
}

.reminder-item:last-child {
  border-bottom: none;
}

.red-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: #f56c6c;
  border-radius: 50%;
  margin: 8px 8px 0 0;
  flex-shrink: 0;
}

.container {
  padding: 10px;
  flex: 1;
  min-width: 0; /* 防止文本溢出 */
}

.text {
  margin: 0;
  white-space: normal;
  word-break: break-word; /* 长单词换行 */

  color: var(--Primary4-950, #16191D) !important;
font-family: "Source Han Sans CN" !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
}

.date {
  margin: 4px 0 0 0;
  font-size: 12px;

  color: var(--Primary4-500, #6F7B90) !important;
font-family: "Source Han Sans CN" !important;
font-style: normal !important;
font-weight: 400 !important;
line-height: normal !important;
}

.more-link {
  text-align: right;
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
  margin-top: 8px;
}
</style>
